// import named mixins
@use 'sass:math';

@import 'imports';

/*
Usage:
.article {
    @include clearfix;
}
*/
@mixin clearfix {
    &:before,
    &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
}

/*
Usage:
h1 {
    @include font-size(24, 16);
}
*/
@mixin font-size($size: 12, $base: 16) {
    /*stylelint-disable*/
    font-size: $size + px; //fallback for old browsers
    font-size: math.div($size, $base) + rem;
    /*stylelint-enable*/
}

/*
Usage:
h1 {
    @include align(center);
}
*/
@mixin align($align: left) {
    text-align: $align;
}

/*
Usage:
h1 {
    @include text-truncate;
}
*/
@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
Usage:
.button {
    @include float(right);
}
*/
@mixin float($float: left) {
    @include ltr-rtl('float', $float);
}

/*
Usage:
.article {
    @include inline-block;
}
*/
@mixin inline-block {
    display: inline-block;
}

/*
Usage:
.is-hidden {
    @include hidden;
}
*/
@mixin hidden {
    display: none;
}

/*
Usage:
.is-invisible {
    @include invisible;
}
*/
@mixin invisible {
    visibility: hidden;
}

/*
Usage:
.article {
    @include center-block(toRem(640));
}
*/
@mixin center-block($width: null) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    @if ($width) {
        width: $width;
    }
}

/* border radius mixins
Usage:
.button {
    @include border-radius(toRem(5));
}
*/
@mixin border-radius($radius) {
    border-radius: $radius;
    background-clip: padding-box; /* stops bg color from leaking outside the border: */
}

@mixin border-top-radius($radius) {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
    background-clip: padding-box;
}

@mixin border-right-radius($radius) {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
    background-clip: padding-box;
}

@mixin border-bottom-radius($radius) {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
    background-clip: padding-box;
}

@mixin border-left-radius($radius) {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
    background-clip: padding-box;
}

/* Cards mixin */
@mixin card($padding: toRem(10), $bg-color: $default-bg-color) {
    padding: $padding;
    background-color: $bg-color;
}

/* border style mixin */
@mixin border-style($border-top-width, $border-bottom-width, $color) {
    border-width: 0;
    border-style: solid;
    border-color: $color;
    border-top-width: $border-top-width;
    border-bottom-width: $border-bottom-width;
}

// Usage:
// @include font-face(Font Family name, '#{path}/font-name', font-weight, font-style ,'Font weight name','Font Family name-no spaces');
// ex:
// @include font-face(Open Sans, '#{$openSans}/open-sans-v15-latin-300', 300, normal,'Open Sans Light','OpenSans-Light');
@mixin font-face($font-family, $file-path, $font-weight, $font-style, $local1, $local2, $isInlineFont: false) {
    @font-face {
        font-family: #{$font-family};
        font-weight: $font-weight;
        font-style: $font-style;
        font-display: swap;

        @if ($isInlineFont) {
            src: url('#{$file-path}') format('woff'); /* Modern Browsers */
        } @else {
            src: local($local1), local($local2), url('#{$file-path}.woff2') format('woff2'),
                url('#{$file-path}.woff') format('woff'); /* Modern Browsers */
        }
    }
}

@mixin set-font-family($default-font: $default-font-family) {
    font-family: $default-font;
}

@mixin mk-square($size) {
    width: $size;
    height: $size;
}

@mixin two-sides-overlay-gradient($bg, $width, $top: 0, $bottom: 0, $index: 2) {
    &:before,
    &:after {
        content: '';
        display: block;
        position: absolute;
        top: $top;
        bottom: $bottom;
        width: $width;
        z-index: $index;
        pointer-events: none;
    }
    &:before {
        left: 0;
        background: linear-gradient(to left, transparent, $bg);
    }

    &:after {
        right: 0;
        background: linear-gradient(to right, transparent, $bg);
    }
}

// menu/popup arrows, such as top popup arrows ex: @include set-arrow('bottom', toRem(6), white)
@mixin set-arrow($brdOrientation, $width, $color) {
    content: '';
    width: 0;
    height: 0;
    border: $width solid transparent;
    border-#{$brdOrientation}: $width solid $color;
}

// thin scrollbar - border color similar to bg color
@mixin thin-scrollbar($width, $color, $border-color: #fff) {
    scrollbar-width: thin;
    scrollbar-color: $color transparent;

    &::-webkit-scrollbar {
        width: ($width * 3) + px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: $color;
        border-radius: ($width * 2) + px;
        border: $width + px solid $border-color;
    }
}

@mixin commerce-header() {
    font-size: $ecommerce-header-font-size;
    line-height: $ecommerce-header-line-height;
    border-bottom: toRem(1) solid $ecommerce-header-border;
    background: transparent;
    color: $ecommerce-header;
    text-transform: capitalize;
    display: block;
    padding: 0 0 $ecommerce-header-padding-bottom;
    margin-bottom: $ecommerce-header-margin-bottom;
    margin-top: $ecommerce-header-margin-top;
    font-weight: $ecommerce-header-font-weight;
}

@mixin colorByType($types) {
    @each $name, $color in $types {
        &__#{$name} {
            color: $color;
        }
    }
}
